<template>
	<view class="pageBg">
		<custom-nav-bar title="设备" :back='false' :backgroundColor="backgroundColor"></custom-nav-bar>
		<view :style="{
			backgroundColor: backgroundColor,  
			position: 'fixed',  
			top: `${getStatusBarHeight + getTitleBarHeight}px`}">
			<u-tabs :activeStyle="{
				color: '#06c',
				fontWeight: 'bold',
				transform: 'scale(1.05)'
			}" :inactiveStyle="{
				color: '#fff',
				transform: 'scale(1)'
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :list="productList" @click="tabsClick"
				:current="current">
			</u-tabs>
		</view>
		<view class="theme">
			<view class="content">
				<u-loading-page style="z-index:9" :loading="loading" loading-text="loading..."
					bg-color="rgb(0, 0, 0,.3)">
				</u-loading-page>
				<block v-if="deviceList&&deviceList.length>0">
					<view v-for="(item,index) in deviceList" :key="index" :item="item">
						<theme-item :item="item"></theme-item>
					</view>
				</block>
				<view v-else-if="deviceList&&deviceList.length === 0">
					<u-empty></u-empty>
				</view>
			</view>
		</view>
		<navigator url="/pages/deviceAdd/deviceAdd" class="row">
			<view class="fixed-button">
				<uni-icons class="plusempty" type="plus" size="50" color='#3c9cff'></uni-icons>
			</view>
		</navigator>
	</view>
</template>

<script>
	import CustomNavBar from '@/components/custom-nav-bar/custom-nav-bar.vue'
	import CommonTitle from '@/components/common-title/common-title.vue'
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
	import {
		getStatusBarHeight,
		getTitleBarHeight,
		getNavBarHeight,
	} from "../../utils/system.js"
	export default {
		data() {
			return {
				loading: true,
				deviceList: [],
				current: 0,
				backgroundColor: '',
				productList: [],
			}
		},
		computed: {
			getStatusBarHeight() {
				return uni.getSystemInfoSync().statusBarHeight || 15
			},
			getTitleBarHeight() {
				if (uni.getMenuButtonBoundingClientRect()) {
					let {
						top,
						height
					} = uni.getMenuButtonBoundingClientRect();
					return height + (top - getStatusBarHeight()) * 2
				} else {
					return 40;
				}
			},
		},
		components: {
			'custom-nav-bar': CustomNavBar,
			'common-title': CommonTitle,
		},
		onLoad() {
			this.getDeviceLists()
			this.getProductlist()
		},
		// onReachBottom() {
		// 	console.log('触底~~~~~');
		// },
		methods: {
			onPageScroll(e) {
				const scrollTop = e.scrollTop;
				if (scrollTop > 10) {
					this.backgroundColor = '#51A9FB';
				} else {
					this.backgroundColor = '';
				}
			},
			tabsClick(e) {
				this.getDeviceLists(e)
				setTimeout(() => {
					this.loading = false;
				}, 600);
			},
			async getDeviceLists(e) {
				this.loading = true
				const db = uniCloud.database()
				try {
					let res = null
					if (!e) {
						// limit(5).skip(this.deviceList.length).
						await db.collection('res').orderBy('createTime', 'desc').get().then(
							res => {
								// let oldlist = this.deviceList
								// let newlist = [...oldlist,...res.result.data]
								// this.deviceList = newlist
								this.deviceList = res.result.data
							})
					} else {
						await db.collection('res').where({
							productId: e.value,
						}).get().then(res => {
							this.deviceList = res.result.data
						})
					}

					this.loading = false;
				} catch (error) {
					console.error('Error fetching device list:', error);
				} finally {
					this.loading = false; // 数据加载完成后设置isLoading为false
					console.log('finally!~~')
				}
			},
			async getProductlist() {
				const db = uniCloud.database()
				const res = await db.collection('products').get()
				let add = [{
					name: '全部'
				}]
				let result = res.result.data.map(item => {
					return {
						name: item.productName,
						value: item._id
					}
				})
				this.productList = [...add, ...result]
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tabsbgc {
		background-color: transparent;
		margin: 0px 10px;
	}

	// .tabsTop {
	// 	position: fixed;
	// 	top: 55px;
	// 	left: 0;
	// }

	.theme {
		margin-top: 60px;

		.more {
			font-size: 32rpx;
			color: #888;
		}

		.content {
			margin-top: 30rpx;
			padding: 0 30rpx;
			// display: grid;
			// gap: 15rpx;
			// grid-template-columns: repeat(2, 1fr);
		}

		.skeleton-screen {
			margin: 20rpx 0;
			padding: 40rpx;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 0.9);
			border: 1px solid rgba(255, 255, 255, 1);
		}
	}

	.cardBg {
		.listbox {
			display: flex;
			align-items: center;

			.left {
				display: flex;
				align-items: center;
				justify-content: left;

				.icon0 {
					height: 45px;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					.uni-icons {
						color: $device-offline-color !important;
					}

					img {
						width: 28px;
						height: 28px;
					}
				}

				.icon1 {
					height: 45px;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					.uni-icons {
						color: $device-online-color !important;
					}

					img {
						width: 28px;
						height: 28px;
					}
				}
			}

			.right {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				// border-bottom: 1px solid rgba(243, 252, 251, 1);

				.text {
					margin-left: 10px;

					.title {
						// font-size: 16px;
						// font-weight: 500;
						// color: rgba(29, 32, 39, 1);

						font-size: 16px;
						font-weight: 500;
						letter-spacing: 0px;
						line-height: 22.4px;
						color: rgba(47, 48, 51, 1);
						text-align: left;
						vertical-align: top;
					}

					.subtitle {
						font-size: 12px;
						font-weight: 500;
						color: rgba(152, 152, 152, 1);
						margin-top: 5px;
					}
				}

				.online {
					display: inline-block;
					padding: 6px;
					border-radius: 50%;
					background-color: #0066CC;
				}

				.offline {
					display: inline-block;
					padding: 6px;
					border-radius: 50%;
					background-color: rgba(235, 87, 87, 1);
				}
			}
		}
	}

	.addbox {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 20px 10px;

		.item {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			text {
				padding: 5px 0;
			}
		}
	}
</style>
